<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .g-container1 {
        height: 300px;
        display: block;
        background-color: black;
      }

      .g-box1 {
        width: 100px;
        height: 100px;
        background-color: #fff;
        /* height auto is 0 by margin-top andd margin-bottom */
        margin: auto auto;
      }

      .g-container2 {
        height: 300px;
        /* display: flex; */
        display: grid;
        background-color: black;
      }

      .g-box2 {
        width: 100px;
        height: 100px;
        background-color: white;

        /* if parent element is flex or grid, okay */
        margin: auto;
      }
    </style>
  </head>
  <body>
    <!-- horizontal center by margin: 0 auto -->
    <div class="g-container1">
      <div class="g-box1"></div>
    </div>

    <div style="height: 20px"></div>

    <div class="g-container2">
      <div class="g-box2"></div>
    </div>
  </body>
</html>
